<template>
    <uxt-page>
        <view class="padding">
            <uxt-form @submit="handleEvent('form-@submit', $event)">
                <view class="margin-bottom">
                    <uxt-radio
                        name="radio"
                        label="radio-single"
                        :checked="checked"
                        @checked="handleEvent('radio-@checked', $event)"
                    ></uxt-radio>
                </view>
                <view class="margin-bottom">
                    <uxt-radio
                        name="radio"
                        label="radio-singleVModel"
                        v-model="form.radio"
                    ></uxt-radio>
                </view>
                <view class="margin-bottom">
                    <uxt-radio-group
                        name="radio-group"
                        @change="handleEvent('radiogroup-@change', $event)"
                    >
                        <uxt-radio
                            v-for="(item, index) in 3"
                            :checked="index === 0 && checked"
                            :key="index"
                            label="radio-group"
                            :value="index"
                        ></uxt-radio>
                    </uxt-radio-group>
                </view>
                <view class="margin-bottom">
                    <uxt-radio-group name="radio-group" v-model="form.radios">
                        <uxt-radio
                            v-for="(item, index) in 3"
                            :key="index"
                            label="radio-groupVModel"
                            :value="index"
                        ></uxt-radio>
                    </uxt-radio-group>
                </view>
                <view class="margin-bottom">
                    <uxt-checkbox
                        name="checkbox"
                        label="checkbox-single"
                        :checked="checked"
                        @change="handleEvent('checkbox-@change', $event)"
                    ></uxt-checkbox>
                </view>
                <view class="margin-bottom">
                    <uxt-checkbox
                        name="checkbox"
                        label="checkbox-singleVModel"
                        v-model="form.checkbox"
                    ></uxt-checkbox>
                </view>
                <view class="margin-bottom">
                    <uxt-checkbox-group
                        name="checkbox-group"
                        @change="handleEvent('checkboxgroup-@change', $event)"
                    >
                        <uxt-checkbox
                            v-for="(item, index) in 3"
                            :checked="index === 0 && checked"
                            :key="index"
                            label="checkbox-group"
                            :value="index"
                        ></uxt-checkbox>
                    </uxt-checkbox-group>
                </view>
                <view class="margin-bottom">
                    <uxt-checkbox-group name="checkbox-group" v-model="form.checkboxs">
                        <uxt-checkbox
                            v-for="(item, index) in 3"
                            :key="index"
                            label="checkbox-groupVModel"
                            :value="index"
                        ></uxt-checkbox>
                    </uxt-checkbox-group>
                </view>
                <view class="margin-bottom">
                    switch:
                    <uxt-switch
                        name="switch"
                        round
                        :checked="checked"
                        @change="handleEvent('switch-@change', $event)"
                    ></uxt-switch>
                </view>
                <view class="margin-bottom">
                    switch-vmodel:
                    <uxt-switch name="switch" round v-model="form.switch"></uxt-switch>
                </view>
                <uxt-input-bar
                    classes="margin-bottom"
                    title="input"
                    name="input"
                    :value="input"
                    @input="handleEvent('input-@input', $event)"
                ></uxt-input-bar>
                <uxt-input-bar
                    classes="margin-bottom"
                    title="input-vmodel"
                    name="input"
                    v-model="form.input"
                ></uxt-input-bar>
                <uxt-single-selector
                    name="single-selector"
                    :options="options"
                    :value="singleSelector"
                    @change="handleEvent('single-selector-@change', $event)"
                >
                    <view class="padding text-center bg-white margin-bottom">single-selector</view>
                </uxt-single-selector>
                <uxt-single-selector
                    name="single-selector"
                    :options="options"
                    v-model="form.singleSelector"
                >
                    <view class="padding text-center bg-white margin-bottom">
                        single-selector-vmodel-{{ form.singleSelector }}
                    </view>
                </uxt-single-selector>
                <uxt-single-selector-bar
                    classes="margin-bottom"
                    name="single-selector-bar"
                    title="single-selector-bar"
                    :options="options"
                    :value="singleSelectorBar"
                    @change="handleEvent('single-selector-bar-@change', $event)"
                ></uxt-single-selector-bar>
                <uxt-single-selector-bar
                    classes="margin-bottom"
                    name="single-selector-bar"
                    title="single-selector-bar-vmodel"
                    :options="options"
                    v-model="form.singleSelectorBar"
                ></uxt-single-selector-bar>
                <uxt-multi-selector
                    name="multi-selector"
                    :options="options"
                    :value="multiSelector"
                    @change="handleEvent('multi-selector-@change', $event)"
                >
                    <view class="padding text-center bg-white margin-bottom">multi-selector</view>
                </uxt-multi-selector>
                <uxt-multi-selector
                    name="multi-selector"
                    :options="options"
                    v-model="form.multiSelector"
                >
                    <view class="padding text-center bg-white margin-bottom">
                        multi-selector-vmodel-{{ form.multiSelector }}
                    </view>
                </uxt-multi-selector>
                <uxt-multi-selector-bar
                    classes="margin-bottom"
                    name="multi-selector-bar"
                    title="multi-selector-bar"
                    :options="options"
                    :value="multiSelectorBar"
                    @change="handleEvent('multi-selector-bar-@change', $event)"
                ></uxt-multi-selector-bar>
                <uxt-multi-selector-bar
                    classes="margin-bottom"
                    name="multi-selector-bar"
                    title="multi-selector-bar-vmodel"
                    :options="options"
                    v-model="form.multiSelectorBar"
                ></uxt-multi-selector-bar>
                <uxt-color-selector
                    name="color-selector"
                    :value="colorSelector"
                    @change="handleEvent('color-selector-@change', $event)"
                >
                    <view class="padding text-center bg-white margin-bottom">color-selector</view>
                </uxt-color-selector>
                <uxt-color-selector name="color-selector" v-model="form.colorSelector">
                    <view class="padding text-center bg-white margin-bottom">
                        color-selector-vmodel-{{ form.colorSelector }}
                    </view>
                </uxt-color-selector>
                <uxt-color-selector-bar
                    classes="margin-bottom"
                    name="color-selector-bar"
                    title="color-selector-bar"
                    :value="colorSelectorBar"
                    @change="handleEvent('color-selector-bar-@change', $event)"
                ></uxt-color-selector-bar>
                <uxt-color-selector-bar
                    classes="margin-bottom"
                    name="color-selector-bar"
                    title="color-selector-bar-vmodel"
                    v-model="form.colorSelectorBar"
                ></uxt-color-selector-bar>
                <uxt-picker
                    name="picker"
                    :options="options"
                    :value="picker"
                    @change="handleEvent('picker-@change', $event)"
                >
                    <view class="padding text-center bg-white margin-bottom">picker</view>
                </uxt-picker>
                <uxt-picker name="picker" :options="options" v-model="form.picker">
                    <view class="padding text-center bg-white margin-bottom">
                        picker-{{ form.picker }}
                    </view>
                </uxt-picker>
                <uxt-picker-bar
                    classes="margin-bottom"
                    title="picker-bar"
                    name="picker-bar"
                    :options="options"
                    :value="pickerBar"
                    @change="handleEvent('picker-bar-@change', $event)"
                ></uxt-picker-bar>
                <uxt-picker-bar
                    classes="margin-bottom"
                    title="picker-bar"
                    name="picker-bar"
                    :options="options"
                    v-model="form.pickerBar"
                ></uxt-picker-bar>
                <uxt-picker-bar
                    classes="margin-bottom"
                    title="picker-bar2"
                    name="picker-bar2"
                    :options="options2"
                    :value="pickerBar2"
                ></uxt-picker-bar>
                <uxt-picker-bar
                    classes="margin-bottom"
                    title="picker-bar2"
                    name="picker-bar2"
                    :options="options2"
                    v-model="form.pickerBar2"
                ></uxt-picker-bar>
                <uxt-picker-bar
                    classes="margin-bottom"
                    title="picker-bar3"
                    name="picker-bar3"
                    :options="options3"
                    :value="pickerBar3"
                ></uxt-picker-bar>
                <uxt-picker-bar
                    classes="margin-bottom"
                    title="picker-bar3"
                    name="picker-bar3"
                    :options="options3"
                    v-model="form.pickerBar3"
                ></uxt-picker-bar>
                <uxt-time-picker
                    name="time-picker"
                    :value="timePicker"
                    @change="handleEvent('time-picker-@change', $event)"
                >
                    <view class="padding text-center bg-white margin-bottom">time-picker</view>
                </uxt-time-picker>
                <uxt-time-picker name="time-picker" v-model="form.timePicker">
                    <view class="padding text-center bg-white margin-bottom">
                        time-picker-{{ form.timePicker }}
                    </view>
                </uxt-time-picker>
                <uxt-time-picker-bar
                    classes="margin-bottom"
                    title="time-picker-bar"
                    name="time-picker-bar"
                    :value="timePickerBar"
                ></uxt-time-picker-bar>
                <uxt-time-picker-bar
                    classes="margin-bottom"
                    title="time-picker-bar"
                    name="time-picker-bar"
                    v-model="form.timePickerBar"
                ></uxt-time-picker-bar>
                <uxt-date-picker
                    name="date-picker"
                    :value="datePicker"
                    @change="handleEvent('date-picker-@change', $event)"
                >
                    <view class="padding text-center bg-white margin-bottom">date-picker</view>
                </uxt-date-picker>
                <uxt-date-picker name="date-picker" v-model="form.datePicker">
                    <view class="padding text-center bg-white margin-bottom">
                        date-picker-{{ form.datePicker }}
                    </view>
                </uxt-date-picker>
                <uxt-date-picker-bar
                    classes="margin-bottom"
                    title="date-picker-bar"
                    name="date-picker-bar"
                    :value="datePickerBar"
                ></uxt-date-picker-bar>
                <uxt-date-picker-bar
                    classes="margin-bottom"
                    title="date-picker-bar"
                    name="date-picker-bar"
                    v-model="form.datePickerBar"
                ></uxt-date-picker-bar>
                <uxt-button classes="margin-bottom" round form-type="submit" size="block">
                    提交
                </uxt-button>
                <uxt-button
                    classes="margin-bottom"
                    round
                    form-type="reset"
                    size="block"
                    bg-color="red"
                >
                    重置
                </uxt-button>
                <uxt-button
                    classes="margin-bottom"
                    round
                    size="block"
                    bg-color="green"
                    @click="handleEvent('v-model', form)"
                >
                    v-model
                </uxt-button>
            </uxt-form>
            <view v-html="out" @longpress="out = ''"></view>
        </view>
    </uxt-page>
</template>

<script>
import uxtForm from '@xtcoder/uxt/components/uxt-form.vue'
import uxtRadio from '@xtcoder/uxt/components/uxt-radio.vue'
import uxtRadioGroup from '@xtcoder/uxt/components/uxt-radio-group.vue'
import uxtCheckbox from '@xtcoder/uxt/components/uxt-checkbox.vue'
import uxtCheckboxGroup from '@xtcoder/uxt/components/uxt-checkbox-group.vue'
import uxtSwitch from '@xtcoder/uxt/components/uxt-switch.vue'
import uxtInputBar from '@xtcoder/uxt/components/uxt-input-bar.vue'
import uxtSingleSelector from '@xtcoder/uxt/components/uxt-single-selector.vue'
import uxtSingleSelectorBar from '@xtcoder/uxt/components/uxt-single-selector-bar.vue'
import uxtMultiSelector from '@xtcoder/uxt/components/uxt-multi-selector.vue'
import uxtMultiSelectorBar from '@xtcoder/uxt/components/uxt-multi-selector-bar.vue'
import uxtColorSelector from '@xtcoder/uxt/components/uxt-color-selector.vue'
import uxtColorSelectorBar from '@xtcoder/uxt/components/uxt-color-selector-bar.vue'
import uxtPicker from '@xtcoder/uxt/components/uxt-picker.vue'
import uxtPickerBar from '@xtcoder/uxt/components/uxt-picker-bar.vue'
import uxtTimePicker from '@xtcoder/uxt/components/uxt-time-picker.vue'
import uxtTimePickerBar from '@xtcoder/uxt/components/uxt-time-picker-bar.vue'
import uxtDatePicker from '@xtcoder/uxt/components/uxt-date-picker.vue'
import uxtDatePickerBar from '@xtcoder/uxt/components/uxt-date-picker-bar.vue'
import uxtButton from '@xtcoder/uxt/components/uxt-button.vue'

export default {
    components: {
        uxtForm,
        uxtRadio,
        uxtRadioGroup,
        uxtCheckbox,
        uxtCheckboxGroup,
        uxtSwitch,
        uxtInputBar,
        uxtSingleSelector,
        uxtSingleSelectorBar,
        uxtMultiSelector,
        uxtMultiSelectorBar,
        uxtColorSelector,
        uxtColorSelectorBar,
        uxtPicker,
        uxtPickerBar,
        uxtTimePicker,
        uxtTimePickerBar,
        uxtDatePicker,
        uxtDatePickerBar,
        uxtButton
    },
    data() {
        return {
            checked: false,
            input: '',
            singleSelector: -1,
            singleSelectorBar: -1,
            multiSelector: [],
            multiSelectorBar: [],
            colorSelector: '',
            colorSelectorBar: '',
            picker: -1,
            pickerBar: -1,
            pickerBar2: [],
            pickerBar3: [],
            timePicker: '',
            timePickerBar: '',
            datePicker: '',
            datePickerBar: '',
            out: '',
            options: ['选项1', '选项2', '选项3', '选项4'],
            options2: [
                ['选项11', '选项12', '选项13', '选项14'],
                ['选项21', '选项22', '选项23', '选项24']
            ],
            options3: [
                ['广东省', '江西省'],
                [['广州市', '深圳市'], ['南昌市', '吉安市']],
                [
                    [['天河区', '番禹区'], ['福田区', '龙岗区']],
                    [['东湖区', '西湖区'], ['吉州区', '吉安县']]
                ]
            ],
            form: {
                radio: false,
                radios: 1,
                checkbox: false,
                checkboxs: [0, 1],
                switch: false,
                input: '',
                singleSelector: -1,
                singleSelectorBar: -1,
                multiSelector: [],
                multiSelectorBar: [],
                colorSelector: '',
                colorSelectorBar: '',
                picker: -1,
                pickerBar: -1,
                pickerBar2: [],
                pickerBar3: [],
                timePicker: '',
                timePickerBar: '',
                datePicker: '',
                datePickerBar: ''
            }
        }
    },
    methods: {
        handleEvent(type, e) {
            this.out += `${type}:${JSON.stringify(e)}</br>`
        }
    },
    onLoad() {
        setTimeout(() => {
            this.checked = true
            this.form.radio = true
            this.form.radios = 2
            this.form.checkbox = true
            this.form.checkboxs = [2]
            this.form.switch = true
            this.input = 'abc'
            this.form.input = 'def'
            this.singleSelector = 1
            this.form.singleSelector = 2
            this.singleSelectorBar = 0
            this.form.singleSelectorBar = 3
            this.multiSelector = [1, 2]
            this.form.multiSelector = [2, 3]
            this.multiSelectorBar = [0, 1]
            this.form.multiSelectorBar = [1, 3]
            this.colorSelector = 'red'
            this.form.colorSelector = '#FFF000'
            this.colorSelectorBar = 'green'
            this.form.colorSelectorBar = '#000FFF'
            this.picker = 1
            this.form.picker = 2
            this.pickerBar = 1
            this.form.pickerBar = 2
            this.pickerBar2 = [0, 1]
            this.form.pickerBar2 = [2, 3]
            this.pickerBar3 = [0, 1, 1]
            this.form.pickerBar3 = [1, 0, 1]
            this.timePicker = '14:50'
            this.form.timePicker = '17:30'
            this.timePickerBar = '14:50'
            this.form.timePickerBar = '17:30'
            this.datePicker = '2020-05-01'
            this.form.datePicker = '2020-05-05'
            this.datePickerBar = '2020-05-01'
            this.form.datePickerBar = '2020-05-05'
        }, 5000)
    }
}
</script>

<style></style>
